<template>
  <div class="box">
    <el-card class="box-card">
      <div class="clearfix">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button style="float: right;" type="success" icon="el-icon-edit" @click="addQuestions"
          >新增试题</el-button
        >
      </div>
      <el-row>
        <el-form size="mini" label-position="right" label-width="80px" :model="query">
          <el-col :span="6">
            <el-form-item label="学科" >
              <el-select placeholder="请选择" v-model="query.subjectID" @change="getDirectoryList">
                <el-option
                  v-for="item in SubjectsList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.subjectName"
                ></el-option>
              </el-select>
            </el-form-item></el-col
          >
          <el-col :span="6"
            ><el-form-item label="二级目录">
              <el-select placeholder="请选择" v-model="query.catalogID">
               <el-option
                    v-for="item in directoryList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="标签" >
              <el-select placeholder="请选择" v-model="query.tags">
                <el-option
                    v-for="item in tagsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="关键字">
              <el-input placeholder="根据题干搜索" v-model="query.keyword"> </el-input > </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="试题类型">
              <el-select placeholder="请选择" v-model="query.questionType">
                <el-option
                  v-for="item in questionTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item></el-col
          >
          <el-col :span="6"
            ><el-form-item label="难度">
              <el-select placeholder="请选择" v-model="query.difficulty">
                <el-option v-for="item in difficultyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="方向">
              <el-select placeholder="请选择"  v-model="query.direction">
               <el-option v-for="item in directionList"
                  :key="item"
                  :label="item"
                  :value="item"></el-option>
              </el-select>
            </el-form-item></el-col
          >
          <el-col :span="6"
            ><el-form-item label="录入人" >
              <el-select placeholder="请选择" v-model="query.creatorID">
                <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="题目备注"> <el-input v-model="query.remarks"></el-input> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="企业简称"> <el-input v-model="query.shortName"></el-input> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="城市" class="city">
              <el-select placeholder="请选择省" style="width:49%" v-model="query.province" @change="getProvincesByCity">
                <el-option v-for="item in provinceList"

                  :key="item"
                  :label="item"
                  :value="item"></el-option>
              </el-select>
              <el-select placeholder="请选择市" style="width:49%;margin-left:2%" v-model="query.city">
                <el-option v-for="item in cityList"
                  :key="item"
                  :label="item"
                  :value="item"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item>
              <el-button @click.native="resetForm">清除</el-button>
              <el-button type="primary" @click="searchList">搜索</el-button>
            </el-form-item></el-col
          >
        </el-form>
      </el-row>

      <!-- 选项卡 -->
      <template>
        <el-tabs type="card" shadow="never" value="all" @tab-click="handleClick">
          <el-tab-pane label="全部" name="all"></el-tab-pane>
          <el-tab-pane label="待审核" name="0"></el-tab-pane>
          <el-tab-pane label="已审核" name="1"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
        </el-tabs>
      </template>

        <el-alert  :title="'数据一共'+total+'条'" type="info" show-icon :closable="false" style="padding:8px 16px;margin-bottom:15px" >
          </el-alert>

      <!-- 列表区域 -->
      <template>
        <el-table style="width: 100%;" :data="List">
          <el-table-column width="150" label="试题编号" prop="number"></el-table-column>
          <el-table-column width="150" label="学科" prop="subject"></el-table-column>
          <el-table-column width="150" label="目录" prop="catalog"></el-table-column>
          <el-table-column width="150" label="题型">
            <template #default="{row}">
               {{ formatType(row.questionType) }}
            </template>
          </el-table-column>
         <el-table-column width="150" label="题干">
      <template #default="{row}">
      <div v-html="row.question"></div>
      </template>
      </el-table-column>
          <el-table-column label="录入时间">
            <template #default="{ row }">
              {{ formatDate(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column width="150" label="难度" prop="difficulty">
            <template #default="{ row }">
              {{  formatDifficulty(row.difficulty)}}
            </template>
          </el-table-column>
          <el-table-column width="150" label="录入人" prop="creator"></el-table-column>
          <el-table-column label="审核状态">
            <template #default="{ row }">
              {{ formatChkState(row.chkState) }}
            </template>
          </el-table-column>
          <el-table-column width="150" label="审核意见" prop="chkRemarks"></el-table-column>
          <el-table-column width="150" label="审核人" prop="chkUser"></el-table-column>
          <el-table-column width="150" label="发布状态">
            <template #default="{ row }">
              {{ formatPublishState(row.publishState)}}
              </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200px;">
            <template #default="{row}">
              <el-button type="text" size="small"  @click="openDialog(row)">预览</el-button>
              <el-button type="text" size="small" :disabled="row.chkState?true:false" @click="addDialog(row.id)">审核</el-button>
              <el-button type="text" size="small" @click="UpdateQuestions(row.id)">修改</el-button>
              <el-button type="text" size="small"  @click="groundingState(row.id,row.publishState)">{{ row.publishState ? "上架" : "下架" }}</el-button>
              <el-button type="text" size="small" :disabled="row.publishState?false:true" @click="delQuestions(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页区域 -->
      <template>
        <div class="block" style="float: right;">
          <el-pagination
          :current-page="query.page"
            background
            layout=" prev, pager, next,sizes, jumper"
            :total="total"
            :page-sizes="[5, 10, 20, 50]"
            @current-change="changePage"
            @size-change="handleSizeChange"
            :page-size="query.pagesize"
          >
          </el-pagination>
        </div>
      </template>
    </el-card>
    <!-- 审核弹框 -->
    <el-dialog title="题目审核" :visible="dialogVisibleSh" @close="closeDialog" width="400px" height="250px">
      <template #default>
        <el-form ref="formState" :model="examineForm">
          <el-form-item>
            <el-radio v-model="examineForm.radio" label="1">通过</el-radio>
           <el-radio v-model="examineForm.radio" label="2">拒绝</el-radio>
           </el-form-item>
          <el-form-item>
            <el-input placeholder="请输入审核意见" ref="inputState" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"  v-model="examineForm.textarea"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </template>
    </el-dialog>
    <questions-randoms-preview ref="detailDialog" :is-edit='isEdit' :dialogVisible='showPreviewDialog' @close-dialog='closePreviewDialog'></questions-randoms-preview>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list } from '@/api/hmmm/subjects.js'
import { choice, choiceCheck, remove, choicePublish } from '@/api/hmmm/questions.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { simple as tagListAPI } from '@/api/hmmm/tags.js'
import { simple as directionListAPI } from '@/api/hmmm/directorys.js'
import { simple as userListApi } from '@/api/base/users.js'

import * as dayjs from 'dayjs'
import QuestionsRandomsPreview from '@/module-hmmm/components/question-preview'
export default {
  name: 'QuestionsChoice',
  components: {
    QuestionsRandomsPreview
  },
  data () {
    return {
      // 筛选表单数据
      query: {
        // 页大小
        // pagesize: 5,
        // 当前页码
        // page: 1,
        // 学科
        subjectID: null,
        // 目录
        catalogID: null,
        // 录入人
        creatorID: null,
        // 题型
        questionType: null,
        // 难度
        difficulty: null,
        // 标签
        tags: null,
        // 关键字 根据题干搜索
        keyword: null,
        // 题目备注
        remarks: null,
        // 企业简称
        shortName: null,
        // 方向
        direction: null,
        // 城市,
        province: null,
        // 区县
        city: null,
        chkState: null
      },
      // 精选列表
      List: [],
      // 获取到的学科列表
      SubjectsList: [],
      questionTypeList: questionType,
      difficultyList: difficulty,
      directionList: direction,
      dialogVisibleSh: false,
      showPreviewDialog: false,
      isEdit: true,
      total: 0,
      examineForm: {
        curId: null,
        radio: '',
        textarea: ''
      },
      publishState: '',
      // 目录列表
      directoryList: [],
      // 标签列表
      tagsList: [],
      // 录入人

      userList: [],
      // 省份
      provinceList: [],
      // provinceList: provinces(),
      // 城市区域
      cityList: []
      // cityList: citys(this.query.province)

    }
  },
  mounted () {
    this.getList()
    this.getSubjects()
    this.getDirectoryList()
    this.getProvincesList()
    this.getUserList()
    this.searchList()
  },
  methods: {
    // 获取精选列表
    async getList () {
      const res = await choice(this.query)
      // console.log(111)
      // console.log(res)
      this.List = res.data.items
      this.total = res.data.counts
    },
    // 获取学科
    async getSubjects () {
      const res = await list({ page: 1, pagesize: 50 })
      // console.log(res)
      this.SubjectsList = res.data.items
    },
    // 选择学科联动目录
    async getDirectoryList () {
      this.directoryList = ''
      this.tagsList = ''
      // 根据学科id查找目录
      const { data } = await directionListAPI({ subjectID: this.query.subjectID })
      const res = await tagListAPI({ subjectID: this.query.subjectID })
      // console.log(res)
      this.directoryList = data
      this.tagsList = res.data
    },
    // 获取录入人
    async getUserList () {
      const res = await userListApi()
      this.userList = res.data
    },
    // 获取省
    getProvincesList () {
      const res = provinces()
      // console.log(res)
      this.provinceList = res
    },
    // // 根据城市，选择区县
    getProvincesByCity () {
      const res = citys(this.query.province)
      // console.log(res)
      this.cityList = res
    },
    // 清除功能
    resetForm () {
      // console.log(111)
      this.query = {
        // 页大小
        pagesize: 5,
        // 当前页码
        page: 1,
        // 学科
        subjectID: undefined,
        // 目录
        catalogID: undefined,
        // 录入人
        creatorID: undefined,
        // 题型
        questionType: undefined,
        // 难度
        difficulty: undefined,
        // 标签
        tags: undefined,
        // 关键字 根据题干搜索
        keyword: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 方向
        direction: '',
        // 城市
        city: '',
        // 区县
        province: ''
      }
      this.getList()
    },
    // 搜索功能
    async searchList () {
      const res = await choice(this.query)
      // console.log(res)
      // // 赋值list
      this.List = res.data.items
      // // 重新渲染列表
      this.getList()
      // // 赋值页码
      this.pages = res.data.counts
    },

    // 新增跳转路由
    addQuestions () {
      this.$router.push('/questions/new')
    },
    // 弹框
    addDialog (id) {
      this.dialogVisibleSh = true
      this.examineForm.curId = id
    },
    closeDialog () {
      this.dialogVisibleSh = false
    },
    // 确认框
    confirm () {
      if (this.textarea === '') {
        this.$message.warning('请输入审核意见')
        return
      }
      this.$refs.formState.validate(async (valid) => {
        if (valid) {
          await choiceCheck({
            id: this.examineForm.curId,
            chkState: +this.examineForm.radio,
            chkRemarks: this.examineForm.textarea
          })
          this.dialogVisibleSh = false
          this.$message.success('操作成功')
          this.getList()
        }
      })
    },
    // 修改跳转路由
    UpdateQuestions (id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id
        }
      })
    },
    // 分页
    changePage (page) {
      this.query.page = page
      this.getList()
    },
    handleSizeChange (pagesize) {
      this.query.pagesize = pagesize
      this.getList()
    },
    // 题型格式化
    formatType (value) {
      const MAP = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return MAP[value]
    },
    // 难度格式化
    formatDifficulty (value) {
      const MAP = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return MAP[value]
    },
    // 处理时间
    formatDate (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    },
    // 处理审核状态
    formatChkState (state) {
      const map = {
        0: '待审核',
        1: '通过',
        2: '拒绝'
      }
      return map[state]
    },
    // 处理发布状态
    formatPublishState (state) {
      const map = {
        0: '上架',
        1: '下架'
      }
      return map[state]
    },
    // 上架下架
    groundingState (id, state) {
      this.$confirm(`'您确定'${state ? '上架' : '下架'}'这道题目吗?'`, '提示', {
        type: 'warning',
        callback: async r => {
          if (r === 'confirm') {
            state = state === 0 ? 1 : 0

            await choicePublish({
              id: id,
              publishState: state
            })

            this.getList()
            this.$message.success('操作成功')
          }
        }
      })
    },
    // 删除
    async delQuestions (id) {
      await remove({
        id: id
      })
      this.$confirm('确定删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      })
    },
    // 选项卡
    async handleClick (tab) {
      if (tab.name === 'all') {
        this.query.chkState = null
      } else {
        this.query.chkState = Number(tab.name)
      }

      this.getList()
    },
    // 预览题目详情
    openDialog (id) {
      // console.log(id)
      this.showPreviewDialog = true
      this.$refs.detailDialog.getSelectDetail(id)
    },
    closePreviewDialog () {
      this.showPreviewDialog = false
    }
  }

}
</script>

<style scoped lang="less">
.box {
  margin: 0 8px;
  margin-top: 10px;
}

.clearfix {
  padding: 0;
  margin-top: 0;
  margin-bottom: 15px;

  .el-button {
    font-size: 12px;
  }
  span {
    font-size: 14px;
    color: #ffc0cb;
  }
}
  .el-tabs {
    margin-top: 0;
  }
  .block .el-pagination {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .el-select {
    width: 100%;
  }
</style>
